<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <title>经典倒计时</title>
	
	<link rel='stylesheet prefetch'  href="${ctx}/resource/css/csshake.min.css">
    
    <link href="${ctx}/resource/css/classicsCountdown.css" rel="stylesheet" type="text/css"/>
    
    <style type="text/css">
    	#js_hour,#js_min,#js_second{
    		 display: inline;
    		 width: 50px;
    		 vertical-align: middle;
    	} 
    	.position{
    		margin: 50px 0 0 -100px;
    	}
    	.div-align{
    		text-align:center;
    		margin-top:20px;
    	}
    	.div-top{
    		margin-top: 120px;
    	}
    </style>
</head>
 
 <body>
		
    <data id="info" nav="timer" menu="addCountDown" service="倒计时服务" action="简约倒计时">
  	<div class="row wrapper border-bottom white-bg page-heading animated rotateIn min-height" >
         <div class="col-lg-1"></div>
         <div class="col-lg-12 page-heading">
			<div class="tab-content div-align">
				<div class="tab-pane active" id="portlet_tab1">
					<div class="game_time">
						<div class="hold">
							<div class="pie pie1" ></div> 
						</div>
						<div class="bg"></div>
						<div class="time"></div>
					</div>
					<div class="control-group div-top" >
						<div class='clock'>
							<div class='h shake shake-slow' id="hours"></div>
							<div class='m shake shake-slow' id="minutes"></div>
							<div class='s shake shake-slow' id="seconds"></div>
						</div>
						<div class="controls position" >
							<input id="js_hour" size="2" type="text"
								class="m-wrap small form-control" maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'')" value="00"/> <span class="help-inline">时</span> 
							<input id="js_min" size="2" type="text" class="m-wrap small form-control" maxlength="2"
								onkeyup="value=value.replace(/[^\d]/g,'')" value="00"/> <span class="help-inline">分</span> 
							<input id="js_second" 
								size="2" type="text" class="m-wrap small form-control"  maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'')"  value="00"/> <span
								class="help-inline">秒</span>
							<button id="js_start_1" class="btn btn-success">开始</button>
							<button id="js_pause_1" class="btn btn-warning">暂停</button>
							<a id="" class="btn btn-primary" href="${ctx}/center/timer/countdown/fashion.html">炫酷倒计时</a> 
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- JS -->
	<js> 
	<script src="${ctx}/resource/js/app.js"></script>
	<script type="text/javascript">
		function TimeCount() {
		    this.isPause = false;
		    this.task = null;
		    this.isStart = false;
		}
		
		TimeCount.prototype = {
		    constructor: TimeCount,
		    start: function(callback) {
		
		        this.isStart = true;
		        this.isPause = false;
		        if (this.task != null) clearTimeout(this.task);
		        console.log(this.task);
		        var _this = this;
		        this.task = setTimeout(function() {
		            _this.totalSeconds--;
		            if (_this.totalSeconds == -1) {
		                _this.isPause = true;
		                _this.isStart = false;
		            }
		            if (!_this.isPause) {
		                callback(_this.getHour(), _this.getMin(), _this.getSecond());
		                _this.task = setTimeout(arguments.callee, 1000);
		            }
		        },
		        1000);
		    },
		    pause: function() {
		        console.log("pause");
		        if (this.task != null) clearTimeout(this.task);
		        this.isPause = true;
		    },
		    timeContinue: function(callback) {
		        console.log("continue"); this.isPause = false;
		        this.start(callback);
		    },
		    getHour: function() {
		        return parseInt(this.totalSeconds / 3600);
		    },
		    getMin: function() {
		        var _tmp = this.totalSeconds - this.getHour() * 3600;
		        return parseInt(_tmp / 60);
		    },
		    getSecond: function() {
		        return this.totalSeconds % 60;
		    },
		    toString: function() {
		        return this.getHour() + ":" + this.getMin() + ":" + this.getSecond();
		    },
		    init: function(h, m, s) {
		        this.hour = h;
		        this.min = m;
		        this.second = s;
		        console.log("init : " + this.hour + " , " + this.min + " , " + this.second);
		        this.totalSeconds = parseInt(this.hour * 3600) + parseInt(this.min * 60) + parseInt(this.second);
		        this.initSecond = this.totalSeconds;
		        console.log("total Second :" + this.totalSeconds);
		        console.log("init Second :" + this.initSecond);
		    },
		    getPer: function() {
		        var a = 100;
		        if ((this.totalSeconds <= 0) || this.initSecond <= 0) {
		            return 0;
		        }
		        a = parseInt(this.totalSeconds / this.initSecond * 100);
		        return a;
		    }
		}
		
		var t = new TimeCount();
		t.init(0, 0, 0);
		
		var percent = function() {
		    var per = t.getPer();;
		    $(".time").html(per + "%");
		    drowCircle(per);
		}
		
		var drowCircle = function(per) {
		    var i = (100 - per) * 1.8;
		    $(".pie1").css("-o-transform", "rotate(" + i + "deg)");
		    $(".pie1").css("-moz-transform", "rotate(" + i + "deg)");
		    $(".pie1").css("-webkit-transform", "rotate(" + i + "deg)");
		};
		
		function init() {
		    var time = 0;
		    var start = document.getElementById("js_start_1");
		    var pause = document.getElementById("js_pause_1");
		    var hours = document.getElementById("hours");
		    var minutes = document.getElementById("minutes");
		    var seconds = document.getElementById("seconds");
		    time = t.totalSeconds;
		    s = setInterval("percent()", 0); //百分比
		    start.onclick = function() {
		        start.innerText = "开始";
		 		if ($("#js_second").val() == "") {
		 			layer.msg("秒必须输入！");
		 			return;
		 		} else {
		 			if (($("#js_min").val() == "" && $("#js_hour").val() == "")
		 					|| ($("#js_min").val() == 0 && $("#js_hour").val() == 0)) {
		 				if ($("#js_second").val() <= 0 || $("#js_second").val() > 59) {
			 				layer.msg("秒必须输入小于60并且大于0！");
			 				return;
		 				}
		 			}
		 			if (($("#js_min").val() != "" || $("#js_hour").val() != "") 
		 					|| ($("#js_min").val() != 0 || $("#js_hour").val() != 0)) {
			 			if ($("#js_second").val() < 0 || $("#js_second").val() > 59) {
				 			layer.msg("秒必须输入小于60并且大于等于0！");
				 			return;
			 			}
		 			}
		 			if ($("#js_min").val() != "" && ($("#js_min").val() < 0 || $("#js_min").val() > 59)) {
		 				if ($("#js_second").val() == 0 && $("#js_hour").val() == 0) {
				 			layer.msg("分输入必须小于60并且大于0！");
				 			return;
		 				} else {
				 			layer.msg("分输入必须小于60并且大于等于0！");
				 			return;
		 				}
		 			}
		 	        if (t.isStart && t.isPause) {
		 	            t.timeContinue(function(h, m, s) {
		 	                console.log(h + " : " + m + " : " + s);
		 	                h = (h + "").length == 1 ? "0" + h: h;
		 	                m = (m + "").length == 1 ? "0" + m: m;
		 	                s = (s + "").length == 1 ? "0" + s: s;
		 	                if ($('.h').text() != h) {
		 	                    shake($('.h'));
		 	                }
		
		 	                if ($('.m').text() != m) {
		 	                    shake($('.m'));
		 	                }
		 	                if ($('.s').text() != s) {
		 	                    shake($('.s'));
		 	                }
		 	                hours.innerHTML = h;
		 	                minutes.innerHTML = m;
		 	                seconds.innerHTML = s;
		 	            });
		 	            return;
		 	        }
		 	        t.init($("#js_hour").val(), $("#js_min").val(), $("#js_second").val());
		 	        t.start(function(h, m, s) {
		 	            console.log(h + " : " + m + " : " + s);
		 	            h = (h + "").length == 1 ? "0" + h: h;
		 	            m = (m + "").length == 1 ? "0" + m: m;
		 	            s = (s + "").length == 1 ? "0" + s: s;
		 	            if ($('.h').text() != h) {
		 	                shake($('.h'));
		 	            }
		
		 	            if ($('.m').text() != m) {
		 	                shake($('.m'));
		 	            }
		 	            if ($('.s').text() != s) {
		 	                shake($('.s'));
		 	            }
		 	            hours.innerHTML = h;
		 	            minutes.innerHTML = m;
		 	            seconds.innerHTML = s;
		 	        });
		 		}
		    }
		    $(".stop").click(function() {
		        isStart = false;
		        $(".start").html("继续");
		        //获取当前时间为暂停时间；
		        $("#content").stop(false);
		    });
		    pause.onclick = function() {
		        t.pause();
		        start.innerText = "继续";
		        console.log(t.totalSeconds);
		    }
		}
		window.onload = init;
		function shake(t) {
		    t.addClass('shake-constant');
		    setTimeout(function() {
		        t.removeClass('shake-constant');
		    },
		    470)
		}
	</script>
	</js> 
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>